// 资产信息
<template>
  <div class="padding-right-15 margin-bottom-15">
    <el-collapse accordion v-model="activeNames">
      <el-collapse-item name="1">
        <template slot="title">
          <span class="font-size-18 font-weight-700 padding-right-10">资产信息</span>
          <i v-if="isEdit" class="header-icon el-icon-plus" @click.stop="addItem"></i>
        </template>
        <el-table :border="true" :data="tableList">
          <el-table-column align="center" label="序号">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="交付时间" width="155px">
            <template slot-scope="scope">
              <el-date-picker type="date" :disabled="!isEdit" value-format="timestamp" class="no-border-input yj-input" v-model="scope.row.rentStartDate" @change="validateDate(scope.row)" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="结束时间" width="155px">
            <template slot-scope="scope">
              <el-date-picker type="date" :disabled="!isEdit" value-format="timestamp" class="no-border-input yj-input" v-model="scope.row.rentEndDate" @change="validateDate(scope.row)" />
            </template>
          </el-table-column>
          <el-table-column align="center" label="选择资产" width="155px">
            <template slot-scope="scope">
              <el-select class=" yj-input" :disabled="!isEdit" v-model="scope.row.assetKey" placeholder="请选择" filterable @change="setAssetTxt(scope.row)">
                <el-option v-for="item in scope.row.assetList" :key="item.primaryKey" :label="item.shopNumber" :value="item.primaryKey"> </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="资产类型">
            <template slot-scope="scope">
              <el-select class=" yj-input" :disabled="true" v-model="scope.row.assetType" placeholder="请选择">
                <el-option v-for="(item, i) in assetTypeList" :key="i" :label="item.dictValue" :value="item.dictKey"> </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="商铺建筑面积">
            <template slot-scope="scope">
              <el-input class="no-border-input yj-input" :readonly="true" v-model="scope.row.buildingArea"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="商铺计费面积">
            <template slot-scope="scope">
              <el-input class="no-border-input yj-input" :readonly="true" v-model="scope.row.chargeArea"></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" prop="remark" v-if="isEdit">
            <template slot-scope="scope">
              <el-button type="text" @click="deleteItem(scope.row, scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>
  import { contractCost } from '../../mixin/contractCost';
  import { apiShopList } from '../../api/contract';
  import { requestTips, askDialog } from '@/common/js/utils.js';
  export default {
    mixins: [contractCost],
    props: {
      title: {
        type: String,
        default: '',
      },
      isEdit: {
        type: Boolean,
        default: true,
      },
      //基本信息中选择的项目key
      choseProjectKey: {
        type: String,
        default: '',
      },
      contractInfo: {
        type: Object,
        default: () => {
          return {};
        },
      },
      dictoryList: {
        type: Array,
        default: () => {
          return [];
        },
      },
      list: {
        type: Array,
        default: () => {
          return [];
        },
      },
    },

    data() {
      return {
        activeNames: ['1'],
        tableList: [],
        stageList: [], //阶段
        assetTypeList: [
          { dictKey: '1', dictValue: '商铺' },
          { dictKey: '3', dictValue: '写字楼' },
          { dictKey: '8', dictValue: '仓库' },
        ], //资产类型
        currentProjectKey: '',
        pageName: 'rentCycleList',
        formObj: {
          rentStartDate: '',
          rentEndDate: '',
          assetKey: '',
          assetType: '',
          buildingArea: undefined,
          chargeArea: undefined,
          assetArea: '',
          shareArea: '',
          assetName: '',
          assetCode: '',
          assetList: [],
        },
      };
    },

    watch: {
      choseProjectKey: {
        handler(val) {
          this.currentProjectKey = val;
          this.initFiled();
          this.setDataForDadComponent();
        },
      },
      list: {
        deep: true,
        immediate: true,
        handler(val) {
          val.forEach((item,i) => {
            item.assetArea = item.chargeArea
          //   this.tableList.push(this.formObj);
          //   for (let filed in this.formObj) {
          //     this.tableList[i][filed] = item[filed]
          //   }
          })
          this.tableList = val || [];
          this.setDataForDadComponent();
        },
      },
    },

    methods: {
      //新增
      addItem() {
        this.tableList.push(JSON.parse(JSON.stringify(this.formObj)));
        this.setDataForDadComponent();
      },

      //删除
      deleteItem(item, index) {
        askDialog('确认删除？', async () => {
          this.tableList.splice(index, 1);
        });
        this.setDataForDadComponent();
      },

      //保存
      saveFn() {
        let res = { [this.pageName]: this.tableList };
        return res;
      },

      //给父组件传值
      setDataForDadComponent() {
        this.$emit('setAssetList', this.tableList); //传递本table，目的为页面下面的table赋值资产数据源
      },

      //校验时间
      validateDate(row) {
        if (!row.rentStartDate) {
          row.rentEndDate = '';
          this.$message.warning('请输入交付时间!');
          return;
        }
        let timestamp = row.rentEndDate - row.rentStartDate;
        if (row.rentEndDate && timestamp < 0) {
          row.rentEndDate = '';
          this.$message.warning('结束时间应大于起租时间');
          return;
        }
        if (row.rentEndDate && row.rentStartDate) {
          this.getAssetList(row.rentStartDate, row.rentEndDate, row);
        }
      },

      //查资产
      async getAssetList(rentStartDate, rentEndDate, row) {
        let isUse = null;
        if (this.$route.query.isAgreement) {
          //isAgreement代表补充协议
          isUse = 1;
        } else {
          isUse = !this.contractInfo.contractStatus || this.contractInfo.contractStatus == 3 ? 1 : null;
        }
        let res = await apiShopList({
          projectKey: this.currentProjectKey,
          startDate: rentStartDate,
          endDate: rentEndDate,
          isUse: isUse,
        });
        row.assetList = res.rows || [];
        console.log(row);
      },

      //赋值assetName asssetCode
      setAssetTxt(row) {
        this.outRepeat(row);
        row.assetList.forEach(item => {
          if (row.assetKey == item.primaryKey) {
            row.assetName = item.shopNumber;
            row.assetCode = item.shopCode;
            row.assetArea = item.cadArea || 0;
            row.buildingArea = item.buildingArea || 0;
            row.chargeArea = item.cadArea || 0;
            row.shareArea = item.shareArea || 0;
            row.assetType = item.spaceType || 0;
          }
        });
        this.setDataForDadComponent();
      },

      //去重资产选择
      outRepeat(row) {
        let num = 0;
        this.tableList.forEach(item => {
          if (row.assetKey == item.assetKey) {
            num++;
          }
        });
        if (num > 1) {
          row.assetKey = '';
        }
      },

      //初始化字段
      initFiled() {
        this.tableList.forEach(item => {
          item.assetKey = '';
          item.assetName = '';
          item.assetCode = '';
          item.assetArea = '';
          item.assetList = [];
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
  ::v-deep .el-collapse-item__header {
    font-weight: 700;
    border: none;
  }
</style>
